<template>
	<div>
		<el-table @selection-change="getCheckbox" :data="tableData">
			<!-- 多选框 -->
			<el-table-column type="selection" width="50"></el-table-column>
			<!-- 名称 -->
			<el-table-column prop="name" label="名称"> </el-table-column>
			<!-- 数量 -->
			<el-table-column label="数量">
				<template slot-scope="scope">
					<el-input-number
						v-model="scope.row.count"
						:min="1"
						:max="10"
					></el-input-number>
				</template>
			</el-table-column>
			<!-- 单价 -->、
			<el-table-column label="单价">
				<template v-slot:default="{ row }">
					{{ row.money | filex | add$ }}
				</template>
			</el-table-column>
			<!-- 金额 -->
			<el-table-column label="金额">
				<template v-slot:default="{ row }">
					{{ (row.money * row.count) | filex | add$ }}
				</template>
			</el-table-column>
			<!-- 操作 -->
			<el-table-column label="操作">
				<template v-slot:default="{ $index }">
					<el-button @click="tableData.splice($index, 1)"> 删除 </el-button>
				</template>
			</el-table-column>
			<!-- 总金额 -->
			<template v-slot:append>
				<button @click="del">删除所选</button>
				总价格：{{ totals | filex | add$ }}
			</template>
		</el-table>
	</div>
</template>
<script>
import Data from './data'
export default {
	methods: {
		del() {
			// 双重for循环查找
			console.log(this.dellist)
		},
		getCheckbox(arr) {
			this.dellist = arr
		},
	},
	computed: {
		totals() {
			return this.tableData.reduce((a, b) => {
				return a + b.count * b.money
			}, 0)
		},
	},
	filters: {
		filex(value) {
			return value.toFixed(2)
		},
		add$(value) {
			return value + '（元）'
		},
	},
	mounted() {
		// 通过购物车id值请求数据
		setTimeout(() => {
			this.tableData = Data
		}, 100)
	},
	data() {
		return {
			dellist: [],
			tableData: [],
		}
	},
}
</script>              